<template>
    <div class="warp">
        <button type="button" class="btn btn-default" @click="modifyPwd(true)">修改密码</button>
        <button type="button" class="btn btn-red" @click="logout(true)">退出登录</button>

        <!-- 退出登录弹窗 -->
        <mDialog
            v-model="showLogout"
            type="confirm"
            msg="确认退出登录么？"
            @cancel="logout(false)"
            @ok="userLogout"
        ></mDialog>

        <!-- 修改密码弹窗 -->
        <mDialog
            v-model="showPassowrd"
            ref="disloag"
            type="password"
            @ok="changePwd"
            @cancel="modifyPwd(false)"
        ></mDialog>
    </div>
</template>

<script>
import Api from "page/api";
import { MonDialog as mDialog } from "mon-util";
export default {
    name: "setting",
    components: {
        mDialog
    },
    data() {
        return {
            loading: false,
            showPassowrd: false,
            showLogout: false
        };
    },
    methods: {
        // 退出登录
        logout(type) {
            this.showLogout = type;
        },
        // 用户登出
        userLogout() {
            this.showLogout = false;
            // 清除用户登录态
            Api.logout().then(result => {
                window.location.href = result.data.url
            });
        },
        // 修改密码
        modifyPwd(type) {
            this.showPassowrd = type;
        },
        changePwd(data) {
            // 修改密码操作，注意防止重复请求
            if (this.loading) {
                return false;
            }
            this.loading = true;
            this.showPassowrd = false;
            this.$refs["disloag"].$refs["view"].reset();
            Api.modifyPwd(data.oldPwd, data.newPwd)
                .then(result => {
                    this.loading = false;
                    this.$Toastr.send(result.msg);
                })
                .catch(e => {
                    this.loading = false;
                });
        }
    }
};
</script>

<style lang="less" scoped>
.warp {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
        padding: 6px 16px;
        border-radius: 4px;
        display: inline-block;
        outline: 0;
        margin: 0 8px;
    }

    .btn-red {
        background: #ff0000;
        color: #fff;
        border: 1px solid #fff;
    }

    .btn-default {
        color: #000;
        border: 1px solid #ccc;
    }
}
</style>